<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>好友分组练习</title>
</head>
<body>
    <ul>
        <li>小学
            <ul>
                <li>八神庵</li>
                <li>草雉京</li>
                <li>特瑞</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>初中
            <ul>
                <li>小Y</li>
                <li>斯文</li>
                <li>莱恩</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>高中
            <ul>
                <li>盖伦</li>
                <li>赵信</li>
                <li>嘉文</li>
            </ul>
        </li>
    </ul>


<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        //把所有二层ul隐藏
        $("li>ul").hide();

        //把所有二层ul隐藏
        $("body>ul>li").click(function () {
            //this代表出发事件的元素对象
            $(this).children().toggle();
        });
    </script>
</body>
</html>